<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
      <el-button type="primary" size="mini" class="btn-add" @click="handleAddMenu()" style="margin-left: 20px;float: right;padding: 10px 40px;">添加</el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="menuTable"
                style="width: 100%"
                :data="list"
                border>  <!-- v-loading="listLoading"-->
        <el-table-column label="编号" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="菜单名称" align="center">
          <template slot-scope="scope">{{ scope.row.rule_name }}</template>
        </el-table-column>
        <el-table-column label="菜单栏标识符" align="center">
          <template slot-scope="scope">{{ scope.row.rule_label }}</template>
        </el-table-column>
        <el-table-column label="菜单栏所属父级id" align="center">
          <template slot-scope="scope">{{ scope.row.rule_parentid }}</template>
        </el-table-column>
        <el-table-column label="菜单栏模块名称" align="center">
          <template slot-scope="scope">{{ scope.row.rule_app }}</template>
        </el-table-column>
        <el-table-column label="是否显示" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleHiddenChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.rule_isshow">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="菜单栏控制器名称" align="center">
          <template slot-scope="scope">{{ scope.row.rule_controller }}</template>
        </el-table-column>
        <el-table-column label="菜单栏方法名称" align="center">
          <template slot-scope="scope">{{ scope.row.rule_action }}</template>
        </el-table-column>
        <el-table-column label="菜单栏路由跳转链接" align="center">
          <template slot-scope="scope">{{ scope.row.rule_redirect }}</template>
        </el-table-column>
        <el-table-column label="前端图标" align="center">
          <template slot-scope="scope">
            <svg-icon :icon-class="scope.row.rule_iconImg"></svg-icon>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">{{ scope.row.rule_orderid }}</template>
        </el-table-column>
        <el-table-column label="设置" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleShowNextLevel(scope.row)">查看下级   <!--  :disabled="!scope.row.children"-->
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container" style="text-align: center;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.page_size"
        :page-sizes="[10,15,20]"
        :current-page.sync="listQuery.page"
        :total="total">
      </el-pagination>
    </div>
    <!--    <div>
          {{routers}}
        </div>-->
  </div>
</template>

<script>
import {menuList, menuDel, menuAjax, menuPageList} from '@/api/menu'
import {mapGetters} from 'vuex'

export default {
  name: "menuList",
  data() {
    return {
      list: [],
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 10
      },
      parentId: 0
    }
  },
  created() {
    this.resetParentId();
    this.getList();
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'routers'
    ]),
  },
  watch: {
    $route(route) {
      this.resetParentId();
      this.getList();
    }
  },
  methods: {
    resetParentId() {
      this.listQuery.page = 1;
      if ( this.$route.query.parentId != null ) {
        this.parentId = this.$route.query.parentId;
      } else {
        this.parentId = 0;
      }
    },
    /**
     * 跳转添加页面
     */
    handleAddMenu() {
      this.$router.push('/addMenu');
    },
    /**
     * 获取列表数据
     */
    getList() {
      this.listLoading = true;
      menuPageList({
        rule_parentid: 0,
        page: this.listQuery.page,
        page_size: this.listQuery.page_size
      }).then(response => {
        this.list = response.data.data_list
        this.total=response.data.total
      });
    },
    handleSizeChange(val) {
      this.listQuery.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleHiddenChange(index, row) {
      menuAjax({id: row.id}).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        });
      });
    },
    /**
     * 查看下级
     */
    handleShowNextLevel(row) {
      console.log(row)
      menuPageList({
        rule_parentid: row.id,
        page: 1, /*this.listQuery.page*/
        page_size: this.listQuery.page_size
      }).then(response => {
        this.list = response.data.data_list
        this.total = response.data.total
      });
      /*this.$router.push({path: '/ums/menu', query: {parentId: row.id}})*/
    },
    /**
     * 单条修改
     * @param index
     * @param row
     */
    handleUpdate(index, row) {
      console.log(row);
      this.$router.push({path: '/updateMenu', query: {id: row.id}});
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该菜单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        menuDel(row.id).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          });
          this.getList();
        });
      }).catch(e => e);
    }
  },
  filters: {
    levelFilter(value) {
      if ( value === 0 ) {
        return '一级';
      } else if ( value === 1 ) {
        return '二级';
      }
    },
    disableNextLevel(value) {
      console.log(value);
      if ( value === 0 ) {
        return false;
      } else {
        return true;
      }
    }
  }
}
</script>

<style scoped>
.btn-add {
  float: right;
}
</style>
